<template>
    <div>
        <el-dialog :title="`${thisEditData.staffs_name}--详情`" :visible.sync="infoVisible" width="65%" center :modal="true">
            <el-row class="row-bg">
                <div data-v-00c1d5ce="" class="img_box head_portrait">
                    <div data-v-00c1d5ce="" class="img_position">
                        <img data-v-00c1d5ce="" alt="" class="userpic" :src="thisEditData.staffs_image" /><!---->
                    </div>
                </div>
                <div style="text-align: center;padding-bottom:10px">{{ thisEditData.staffs_department }}</div>
                <el-form :inline="true" :model="thisEditData" class="staffs_table">
                    <table data-v-00c1d5ce="" id="editcadresTable">
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce="">姓名：</td>
                            <td data-v-00c1d5ce="">{{thisEditData.staffs_name}}</td>
                            <td data-v-00c1d5ce="">性别：</td>
                            <td data-v-00c1d5ce="">{{thisEditData.staffs_sex  === 0 ? '女': '男'}}</td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">手机号：</div></td>
                            <td data-v-00c1d5ce="">
                                <div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_phone}}</div>
                            </td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">民族：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">汉族</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">邮箱：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_email}}</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">文化程度：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">普通本科在读</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable">工号：</div></td>
                            <td data-v-00c1d5ce="">
                                <div data-v-00c1d5ce="" class="eachlable width_bg">{{thisEditData.staffs_jobNumber}}</div>
                            </td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">权限：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_type}}</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">部门：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_department}}</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">是否婚配：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_isMarry}}</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce="">
                                <div data-v-00c1d5ce="" id="userCodeTitle" class="eachlable height_bg">年龄：</div>
                            </td>
                            <td data-v-00c1d5ce="">
                                <div data-v-00c1d5ce="" id="userCodeContent" class="eachlable height_bg width_bg">{{thisEditData.staffs_age}}</div>
                            </td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">工龄：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_jobAge}}</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">薪资：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_salary}}</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">工作状况</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">{{thisEditData.staffs_workType}}</div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">QQ：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">微信：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">微博：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">团干部性质：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">团内现任职务：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg">副书记</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">任现职年月：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                        </tr>
                        <tr data-v-00c1d5ce="">
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg">任现职方式：</div></td>
                            <td data-v-00c1d5ce=""><div data-v-00c1d5ce="" class="eachlable height_bg width_bg"></div></td>
                            <td data-v-00c1d5ce=""><!----></td>
                            <td data-v-00c1d5ce=""><!----></td>
                        </tr>
                    </table>
                </el-form>
            </el-row>
            <!-- <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户名称:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_name}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户密码:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_password}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户类型:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_type}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户年龄:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_age}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户性别:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_sex ? '女' : '男'}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="10" class="row-bg">
                <el-col :xs="8" :sm="6" :md="4" :lg="6" :xl="1" class='col-left'>
                    <span>用户真实姓名:</span></el-col>
                <el-col :xs="4" :sm="6" :md="8" :lg="18" :xl="11">
                    <span>{{thisEditData.customer_reallyName}}</span>
                </el-col>
            </el-row> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="childCenterDialogVisibleChange">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { submitGoodsEdit } from '../../../api/index';
export default {
    data() {
        return {
            thisEditData: this.editData
        };
    },
    computed: {},
    watch: {
        editData(newVal, oldVal) {
            this.thisEditData = newVal;
        }
    },
    methods: {
        getVislble() {
            console.log(this.infoVisible);
        },
        childCenterDialogVisibleChange: function () {
            this.$emit('checkInfoVisible', this.infoVisible);
        }
    },
    props: ['checkInfoVisible', 'editData', 'infoVisible']
};
</script>

<style scoped>
.row-bg {
    margin-bottom: 20px;
}
.col-left {
    text-align: right;
}
/* .el-input{
    display: ;
} */
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo img {
    width: 150px;
    height: 150px;
    margin-right: 20px;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.img_box[data-v-00c1d5ce] {
    width: 100%;
    height: auto;
    text-align: center;
    /* padding-top: 32px; */
    padding-bottom: 14px;
}
.img_box .img_position[data-v-00c1d5ce] {
    width: 124px;
    height: 124px;
    margin: 0 auto;
    position: relative;
}
.img_box .img_position img[data-v-00c1d5ce] {
    border-radius: 50%;
    height: 124px;
    vertical-align: middle;
    width: 124px;
}
.staffs_table table[data-v-00c1d5ce] {
    width: 940px;
    height: auto;
    border: 1px solid #e0e0e0;
    border-collapse: separate;
    border-radius: 4px;
    border-right: none;
    border-bottom: none;
    margin-bottom: 34px;
    font-size: 14px;
}
.staffs_table table tr td[data-v-00c1d5ce]:first-child,
.staffs_table table tr td[data-v-00c1d5ce]:nth-child(3) {
    background: #f3f3f3;
    width: 220px;
    color: #444;
    font-size: 14px;
    text-align: right;
    padding-right: 22px;
}
.staffs_table table tr td[data-v-00c1d5ce] {
    height: 45px;
    border-bottom: 1px solid #e0e0e0;
}
table tr td[data-v-00c1d5ce] {
    border-right: 1px solid #ddd;
    text-align: center;
}
</style>